<template>
	<view class="main">
		<view class="address" @tap="seleAdd">
			<image class="icon" src="@/static/img/address.png" mode=""></image>
			<view class="msg" v-if="!isAdd">
				请选择默认收货地址
			</view>
			<view class="info" v-else>
				<view class="add">
					{{address.province}}{{address.city}}{{address.district}}{{address.address}}
				</view>
				<view class="name">
					<span>{{address.realname}}</span>
					<span>{{address.mobile}}</span>
				</view>
			</view>
			<image class="right" src="@/static/img/right.png" mode=""></image>
		</view>
		<view class="goods">
			<view class="item" v-for="(item,index) in tagInfo.list" :key="index">
				<view class="img">
					<image :src="item.cover_ico" mode=""></image>
				</view>
				<view class="txt">
					<view class="name">
						{{item.product_name}}
					</view>
					<view class="sku">
						{{item.parameters}}
					</view>
					<view class="price">
						<span>￥{{item.price}}</span>
						<view class="num">
							<image src="@/static/img/ride.png" mode=""></image>
							{{item.num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="notes">
			<view class="msg">
				订单备注
			</view>
			<input type="text" placeholder="请输入你的需求" v-model="msg" />
		</view>
		<view class="pay">
			<ul>
				<li>
					<view class="msg">
						应付款
					</view>
					<view class="num">
						￥{{tagInfo.total}}
					</view>
				</li>
				<li>
					<view class="msg">
						运费
					</view>
					<view class="num">
						￥{{tagInfo.transfee}}
					</view>
				</li>
			</ul>
		</view>
		<view class="selePay">
			<view class="tit">
				支付方式
			</view>
			<view class="">
				<u-radio-group v-model="paytype" iconPlacement="right" placement="column" borderBottom>
					<u-radio labelColor="#3d3d3d" activeColor="#0a81f8" label="在线支付" :name="1"></u-radio>
					<u-radio labelColor="#3d3d3d" activeColor="#0a81f8" label="货到付款" :name="3"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="selePay">
			<view class="tit">
				配送方式
			</view>
			<view class="">
				<u-radio-group v-model="transtype" iconPlacement="right" placement="column" borderBottom>
					<u-radio labelColor="#3d3d3d" activeColor="#0a81f8" label="物流" :name="1"></u-radio>
					<u-radio labelColor="#3d3d3d" activeColor="#0a81f8" label="公司配送" :name="2"></u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="bottom">
			<view class="in">
				<view class="price">
					￥{{tagInfo.total + tagInfo.transfee}}
				</view>
				<view class="btn" @tap="upOrder() ">
					订单支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrder,
		readd,
		createorder
	} from '@/api/user.js'
	export default{
		data(){
			return{
				value:1,
				tag:'',
				msg:'',
				tagInfo:{},
				isAdd:false,
				address:{},
				paytype:1,
				transtype: 1
			}
		},
		onLoad(e) {
			this.tag = e.tag
			this.getInfo()
		},
		onShow() {
			this.getReadd()
		},
		methods:{
			seleAdd(){
				if(!this.isAdd){
					this.routerTo('/pages/pageB/address/addressList')
				}
			},
			async upOrder(){
				let res = await createorder({
					tag:this.tag,
					message:this.msg,
					paytype:this.paytype,
					transtype: this.transtype
				})
				if(res.code == 1){
					if(this.paytype == 1){
						this.routerTo(`/pages/pageB/order/selePay?tag=${res.data.order_num}`)
					}else{
						uni.showToast({
							title:'订单创建成功',
							icon:'none'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000)
					}
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			async getInfo(){
				let res = await getOrder({
					tag:this.tag
				})
				this.tagInfo = res.data
				console.log(this.tagInfo)
			},
			async getReadd(){
				let res = await readd()
				if(res.code == 1){
					this.isAdd = true
					this.address = res.data
					this.address.mobile = this.address.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
				}else{
					this.isAdd = false
				}
			},
			routerTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: calc(100vh - 44px);
		background-color: #F8F8F8;
		padding: 15px;
		.address{
			background-color: #fff;
			padding: 10px;
			border-radius: 5px;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 20px;
			.icon{
				width: 26px;
				height: 26px;
				margin-right: 7px;
			}
			.msg{
				font-size: 13px;
				color: #666666;
			}
			.info{
				.add{
					color: #232323;
					font-size: 14px;
					margin-bottom: 13px;
				}
				.name{
					color: #333333;
					font-size: 12px;
					span{
						margin-right: 5px;
					}
				}
			}
			.right{
				position: absolute;
				right: 15px;
				width: 18px;
				height: 18px;
			}
		}
		.goods{
			background-color: #fff;
			padding: 15px 10px;
			border-radius: 5px;
			margin-bottom: 10px;
			.item{
				display: flex;
				align-items: center;
				margin-bottom: 10px;
			}
			.item:last-child{
				margin-bottom: 0;
			}
			.img{
				margin-right: 10px;
				image{
					border-radius: 5px;
					width: 85px;
					height: 85px;
				}
			}
			.txt{
				flex: 1;
				height: 85px;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.name{
					width: 100%;
					color: #232323;
					font-size: 13px;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
				.sku{
					font-size: 13px;
					color: #888888;
				}
				.price{
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #CF4444;
					font-size: 13px;
					font-weight: 700;
					.num{
						color: #666666;
						font-size: 13px;
						font-weight: 400;
						display: flex;
						align-items: center;
						image{
							width: 16px;
							height: 16px;
						}
					}
				}
			}
		}
		.notes{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;
			background-color: #fff;
			border-radius: 5px;
			margin-bottom: 10px;
			.msg{
				color: #3D3D3D;
				font-size: 14px;
				margin-right: 10px;
			}
			input{
				flex: 1;
				text-align: right;
				font-size: 12px;
			}
		}
		.selePay {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		
			.tit {
				font-size: 30rpx;
				color: #3d3d3d;
				font-weight: 700;
				margin-bottom: 20rpx;
			}
		
			/deep/.u-radio {
				margin-bottom: 20rpx;
			}
		
			/deep/.u-radio:last-child {
				border: none;
				margin-bottom: 0;
			}
		}
		.pay{
			padding: 15px;
			background-color: #fff;
			border-radius: 5px;
			margin-bottom: 10px;
			ul{
				li{
					display: flex;
					justify-content: space-between;
					font-size: 14px;
					color: #3D3D3D;
					margin-bottom: 15px;
				}
				li:last-child{
					margin-bottom: 0;
				}
			}
		}
		.payWay{
			border-radius: 5px;
			background-color: #fff;
			padding: 15px;
			/deep/.u-radio{
				padding:10px 0;
				border-bottom: 1px solid #F3F3F3;
			}
			/deep/.u-radio:last-child{
				border-bottom: none;
			}
		}
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			background-color: #fff;
			.in{
				padding: 10px 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.price{
					color: #E1222A;
					font-size: 20px;
					font-weight: 700;
				}
				.btn{
					font-size: 12px;
					padding: 10px 24px;
					background-color: #0A81F8;
					border-radius: 100px;
					color: #fff;
				}
			}
			
		}
	}
</style>